<template>
  <div class="info" @click="!record.read && readM()">
    <div class="icon blueDash"><a-badge status="processing" text="" v-if="!record.read"/><i class="iconfont icon-diqiu"></i></div>
    <div class="content" v-clickoutside="hidReplay">
      <p class="name">{{record.author.name}}</p>
      <p>{{record.content.content || record.content}}</p>
      <p>
        <template v-if="!isSend">
          <a src="javascript:;" @click="showReplay">{{$t('common.replay')}}</a>&nbsp;&nbsp;<a class="error_text" src="javascript:;" @click="del">{{$t('common.delete')}}</a>&nbsp;·
        </template>
      <span class="f12"> {{ record.dateCreated | dateYYMMDDHHmm }} · {{$t('informations.from')}}{{ record.from === 'VENDOR' ? $t('informations.VENDOR'): record.from === 'ATS' ? $t('informations.ATS') : record.from === 'INTERVIEWER_MP' ? $t('informations.INTERVIEWER_MP') : record.from === 'INTERVIEWER_PC' ? $t('informations.INTERVIEWER_PC') : record.from === 'hrMobile' ? $t('informations.hrMobile') : $t('informations.zhaopin') }}</span></p>
      <div class="textarea" v-show="showTextarea">
        <a-textarea :autosize="{ minRows: 2 }" style="resize:none;" v-model="replayContent" ref="textarea" maxlength="60"/>
        <span class="count"> {{ replyCount() }} / 60</span>
        <a-button size="small" @click="reply" :loading="btnLoading" class="send_btn">{{$t('common.send')}}</a-button>
      </div>
      <div class="replay" v-for="(reply, index) in record.comments" :key="reply.author.id + index">
        <p><span class="name">{{reply.author.name}}：</span>{{reply.content.content || reply.content}}</p>
        <p class="f12">{{ reply.lastUpdated | dateYYMMDDHHmm }} · {{$t('informations.from')}}{{ reply.from === 'VENDOR' ? $t('informations.VENDOR'): reply.from === 'ATS' ? $t('informations.ATS') : reply.from === 'INTERVIEWER_MP' ? $t('informations.INTERVIEWER_MP') : reply.from === 'INTERVIEWER_PC' ? $t('informations.INTERVIEWER_PC') : reply.from === 'hrMobile' ? $t('informations.hrMobile') : $t('informations.zhaopin') }}</p>
      </div>
      <!-- <div class="replay">
        <p><span class="name">贾少辉：</span>hhhh</p>
        <p class="f12">6日上午 9:00</p>
      </div> -->
    </div>
  </div>
</template>
<script>
import { replyToPositionTeamHr, deleteMsg, readMsg } from '@/api/resume'
export default {
  name: 'InformationsItem',
  props: [ 'enterpriseId', 'record', 'isSend' ],
  data () {
    return {
      showTextarea: false,
      replayContent: '',
      btnLoading: false
    }
  },
  methods: {
    replyCount () {
      return this.replayContent.length
    },
    hidReplay () {
      this.showTextarea = false
      this.$nextTick(() => {
        this.$refs.textarea.$el.blur()
      })
    },
    showReplay (flag) {
      this.showTextarea = true
      this.$nextTick(() => {
        this.$refs.textarea.$el.focus()
      })
    },
    // 已读
    async readM () {
      let params = {
        enterpriseId: this.enterpriseId,
        messageId: this.record.id
      }
      let res = await readMsg(params)
      if (res.code === 200) {
        this.$emit('reply')
        this.$message.success(res.message)
      }
    },
    // 删除信息
    async del () {
      let params = {
        enterpriseId: this.enterpriseId,
        contextId: this.record.contextId
      }
      let res = await deleteMsg(params)
      if (res.code === 200) {
        this.$emit('reply')
        this.$message.success(res.message)
      }
    },
    // 添加回复
    async reply () {
      if (!this.replayContent) {
        return
      }
      this.btnLoading = true
      let params = {
        enterpriseId: this.enterpriseId,
        message: {
          id: this.record.contextId,
          content: this.replayContent
        }
      }
      let res = await replyToPositionTeamHr(params)
      if (res.code === 200) {
        this.replayContent = ''
        this.$emit('reply')
        this.$message.success(res.message)
      }
      this.btnLoading = false
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.info
  cursor pointer
  padding 12px 0
  line-height 28px
  display flex
  justify-content flex-start
  align-items flex-start
  border-bottom 1px solid borderColor
  .content
    flex 1
    .f12
      font-size 12px
      color textLightGrey
    .name
      font-weight bold
    .replay
      margin-top 6px
      line-height 24px
      background f5Grey
      border 1px solid borderColor
      padding 6px 12px
  .textarea
    position relative
    .count
      position absolute
      right 80px
      bottom 4px
      color cccGrey
    .send_btn
      position absolute !important
      right 4px
      bottom 4px
  .icon
    display flex
    align-items center
    justify-content center
    line-height 36px
    text-align center
    min-width 100px
    padding-top 4px
    padding-right 12px
    .iconfont
      font-size 36px
</style>
